<template>
  <b-modal
    id="modal-update-strategy"
    ref="modal"
    :title="$t('trustedComputing.modal.updateStrategy')"
    @hidden="resetForm"
  >
    <b-form id="form-dns" @submit.prevent="handleSubmit">
      <b-row>
        <b-col sm="6">
          <b-form-group :label="$t('trustedComputing.modal.userName')">
            <b-form-input
              id="userName"
              v-model="form.userName"
              type="text"
              :state="getValidationState($v.form.userName)"
              @input="$v.form.userName.$touch()"
            />
            <b-form-invalid-feedback role="alert">
              <template v-if="!$v.form.userName.required">
                {{ $t('global.form.fieldRequired') }}
              </template>
            </b-form-invalid-feedback>
          </b-form-group>
          <b-form-group :label="$t('trustedComputing.modal.newPassword')">
            <b-form-input
              id="currentPassword"
              v-model="form.currentPassword"
              type="password"
              :state="getValidationState($v.form.currentPassword)"
              @input="$v.form.currentPassword.$touch()"
            />
            <b-form-invalid-feedback role="alert">
              <template v-if="!$v.form.currentPassword.required">
                {{ $t('global.form.fieldRequired') }}
              </template>
            </b-form-invalid-feedback>
          </b-form-group>
          <b-form-group :label="$t('trustedComputing.list.id')">
            <b-form-input
              id="id"
              v-model="form.id"
              type="text"
              :state="getValidationState($v.form.id)"
              @input="$v.form.id.$touch()"
            />
            <b-form-invalid-feedback role="alert">
              <template v-if="!$v.form.id.required">
                {{ $t('global.form.fieldRequired') }}
              </template>
            </b-form-invalid-feedback>
          </b-form-group>
          <b-form-group :label="$t('trustedComputing.list.name')">
            <b-form-input
              id="name"
              v-model="form.name"
              type="text"
              :state="getValidationState($v.form.name)"
              @input="$v.form.name.$touch()"
            />
            <b-form-invalid-feedback role="alert">
              <template v-if="!$v.form.name.required">
                {{ $t('global.form.fieldRequired') }}
              </template>
            </b-form-invalid-feedback>
          </b-form-group>
        </b-col>
        <b-col>
          <b-form-group
            :label="$t('trustedComputing.list.measurementReference')"
          >
            <b-form-input
              id="measurementReference"
              v-model="form.measurementReference"
              type="text"
            />
          </b-form-group>
          <b-form-group :label="$t('trustedComputing.list.hashAlgorithm')">
            <b-form-radio
              v-model="form.measurementHashAlgorithm"
              name="hash-algorithm"
              value="SM3"
              checked
              @input="$v.form.measurementHashAlgorithm.$touch()"
            >
              {{ $t('trustedComputing.modal.hashAlgorithm.SM3') }}
            </b-form-radio>
          </b-form-group>
          <b-form-group :label="$t('trustedComputing.list.ControlModel')">
            <b-form-radio
              v-model="form.controlModel"
              name="control-model"
              value="ignore"
              checked
              @change="$v.form.controlModel.$touch()"
            >
              {{ $t('trustedComputing.modal.controlModel.ignore') }}
            </b-form-radio>
            <b-form-radio
              v-model="form.controlModel"
              name="control-model"
              value="stop"
              @change="$v.form.controlModel.$touch()"
            >
              {{ $t('trustedComputing.modal.controlModel.stop') }}
            </b-form-radio>
            <b-form-radio
              v-model="form.controlModel"
              name="control-model"
              value="report"
              @change="$v.form.controlModel.$touch()"
            >
              {{ $t('trustedComputing.modal.controlModel.report') }}
            </b-form-radio>
          </b-form-group>
        </b-col>
      </b-row>
    </b-form>
    <template #modal-footer="{ cancel }">
      <b-button variant="secondary" @click="cancel()">
        {{ $t('global.action.cancel') }}
      </b-button>
      <b-button type="submit" variant="primary" @click="onOk">
        {{ $t('global.action.confirm') }}
      </b-button>
    </template>
  </b-modal>
</template>

<script lang="ts">
import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import { required } from 'vuelidate/lib/validators';
export default {
  name: 'ModalUpdateStrategy',
  mixins: [VuelidateMixin, BVToastMixin],
  props: {
    url: {
      type: String,
      required: true,
    },
    user: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      form: {
        userName: '',
        currentPassword: '',
        id: '',
        name: '',
        measurementHashAlgorithm: '',
        measurementReference: '',
        controlModel: '',
      },
    };
  },
  watch: {
    user(
      value: {
        [index: string]: string;
      } | null
    ) {
      if (value === null) return;
      this.form.id = value.Id;
      this.form.name = value.Name;
      this.form.measurementHashAlgorithm = value.MeasurementHashAlgorithm;
      this.form.controlModel = value.ControlModel;
    },
  },
  // @ts-ignore
  validations() {
    return {
      form: {
        userName: {
          required,
        },
        currentPassword: {
          required,
        },
        id: {
          required,
        },
        name: {
          required,
        },
        measurementHashAlgorithm: {
          required,
        },
        controlModel: {
          required,
        },
      },
    };
  },
  methods: {
    onOk(bvModalEvt: { preventDefault: () => void }) {
      // prevent modal close
      bvModalEvt.preventDefault();
      this.handleSubmit();
    },
    closeModal() {
      this.$nextTick(() => {
        this.$refs.modal.hide();
        this.form.userName = '';
        this.form.currentPassword = '';
        this.form.id = '';
        this.form.name = '';
        this.form.measurementHashAlgorithm = '';
        this.form.measurementReference = '';
        this.form.controlModel = '';
        this.$v.$reset();
      });
    },
    resetForm() {
      this.form.userName = '';
      this.form.currentPassword = '';
      this.form.id = '';
      this.form.name = '';
      this.form.measurementHashAlgorithm = '';
      this.form.measurementReference = '';
      this.form.controlModel = '';
      this.$v.$reset();
    },
    async handleSubmit() {
      this.$v.$touch();
      if (this.$v.$invalid) return;
      this.closeModal();
      this.$emit(
        'ok',
        this.url,
        this.form.userName,
        this.form.currentPassword,
        this.form.id,
        this.form.name,
        this.form.measurementHashAlgorithm,
        this.form.measurementReference,
        this.form.controlModel
      );
    },
  },
};
</script>
